<template>
  <div class="login">
    <h4>健康档案管理系统</h4>
    <el-form label-width="80px" :model="loginData">
      <el-form-item label="用户名">
        <el-input placeholder="请输入账号" v-model="loginData.name"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          placeholder="请输入密码"
          v-model="loginData.password"
          show-password
        ></el-input>
      </el-form-item>
    </el-form>
    <el-form-item>
      <el-button @click="subFun" class="sub-btr" type="primary">登录</el-button>
    </el-form-item>
  </div>
</template>
<script>
import { reactive } from 'vue'
  import { ElMessage } from 'element-plus'
export default {
  name: "Login",
  setup() {
    let loginData = reactive({
      name: "",
      password: ""
    })
    let subFun =()=>{
      // 先判断账号密码是否为空
      if(!loginData.name||!loginData.password){
         ElMessage.error('账号或密码为空');
         return
      }
      //执行登录操作
      let data ={

      }
      login().then(res=>{

      })
        return {
          
        }
      },

    }
    return {
      loginData,
      subFun
    }
  
}
</script>
<style scoped>
h4 {
  text-align: center;
}

.login {
  width: 400px;
  margin: 150px auto;
  border: 1px solid #3b1111;
  border-radius: 20px;
  padding: 30px;
}
.sub-btr {
  width: 100%;
}
</style>
